<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单</title>
    <link rel="stylesheet" href="css/mine.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
<header>
    <div class="logo">
        <img src="img/logo.png" alt="购物网站标志">
    </div>
    <div class="user-info">
        <a href="mine.html">个人主页</a> | <a href="javascript:logout()" class="logout">退出登录</a>
    </div>
</header>

<nav>
    <ul>
        <li><a href="home.html">首页</a></li>
        <li><a href="shoppingcart.html">购物车</a></li>
        <li>
            <a>我的订单</a>
            <ul class="dropdown">
                <li><a href="order.html#all">历史订单</a></li>
                <li><a href="order.html#unpaid">待支付</a></li>
                <li><a href="order.html#paid">已支付</a></li>
                <li><a href="order.html#uncommented">待评价</a></li>
                <li><a href="order.html#commented">已评价</a></li>
            </ul>
        </li>
        <li>
            <a>设置</a>
            <ul class="dropdown">
                <li><a href="setting.html#profile">个人信息</a></li>
                <li><a href="setting.html#change-password">修改密码</a></li>
            </ul>
        </li>
    </ul>
</nav>

<main>
    <!-- 历史订单板块 -->
    <section id="all-orders" class="order-section" style="display: block;">
        <h2 id="order-title-all">历史订单</h2>
        <table class="order-table">
            <thead>
            <tr>
                <th>订单号</th>
                <th>产品名称</th>
                <th>日期</th>
                <th>总金额</th>
                <th>状态</th>
            </tr>
            </thead>
            <tbody id="order-list-all">
            <!-- 订单数据将在这里动态插入 -->
            </tbody>
        </table>
    </section>

    <!-- 已支付订单板块 -->
    <section id="paid-orders" class="order-section" style="display: none;">
        <h2 id="order-title-paid">已支付的订单</h2>
        <table class="order-table">
            <thead>
            <tr>
                <th>订单号</th>
                <th>产品名称</th>
                <th>付款时间</th>
                <th>总金额</th>
            </tr>
            </thead>
            <tbody id="order-list-paid">
            <!-- 订单数据将在这里动态插入 -->
            </tbody>
        </table>
    </section>

    <!-- 待支付订单板块 -->
    <section id="unpaid-orders" class="order-section" style="display: none;">
        <h2 id="order-title-unpaid">待支付的订单</h2>
        <table class="order-table">
            <thead>
            <tr>
                <th>订单号</th>
                <th>产品名称</th>
                <th>订单创建时间</th>
                <th>应支付金额</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="order-list-unpaid">
            <!-- 订单数据将在这里动态插入 -->
            </tbody>
        </table>
    </section>

    <!-- 待评价订单板块 -->
    <section id="uncommented-orders" class="order-section" style="display: none;">
        <h2 id="order-title-uncommented">待评价的订单</h2>
        <table class="order-table">
            <thead>
            <tr>
                <th>订单号</th>
                <th>产品名称</th>
                <th>订单金额</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="order-list-uncommented">
            <!-- 订单数据将在这里动态插入 -->
            </tbody>
        </table>
    </section>

    <!-- 已评价订单板块 -->
    <section id="commented-orders" class="order-section" style="display: none;">
        <h2 id="order-title-commented">已评价的订单</h2>
        <table class="order-table">
            <thead>
            <tr>
                <th>订单号</th>
                <th>产品名称</th>
                <th>订单金额</th>
                <th>评价时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="order-list-commented">
            <!-- 订单数据将在这里动态插入 -->
            </tbody>
        </table>
    </section>
</main>

<footer>
    <p>&copy; 购物网站。</p>
</footer>

<script>
    $(document).ready(function () {
        // 根据 URL 的哈希值显示相应的部分
        function showSection() {
            const hash = window.location.hash;
            $('.order-section').hide();
            switch (hash) {
                case '#all':
                    $('#all-orders').show();
                    break;
                case '#unpaid':
                    $('#unpaid-orders').show();
                    break;
                case '#paid':
                    $('#paid-orders').show();
                    break;
                case '#uncommented':
                    $('#uncommented-orders').show();
                    break;
                case '#commented':
                    $('#commented-orders').show();
                    break;
                default:
                    $('#all-orders').show();
                    break;
            }

            // 发送AJAX请求获取用户的订单数据，并填充对应板块的订单列表
            const orderType = hash.substring(1); // 获取哈希值去除#后的部分作为订单类型

            $.ajax({
                url: `/order/get-order`, // 传递订单类型作为参数
                type: 'GET',
                dataType: 'json',
                data: {
                    state: orderType
                },
                success: function (response) {
                    if (response.state === 200) {
                        const orders = response.data;
                        const orderListId = `#order-list-${orderType}`; // 根据订单类型确定对应的订单列表元素ID
                        $(orderListId).empty(); // 清空对应板块的现有订单列表
                        if (orders.length > 0) {
                            orders.forEach(order => {
                                let rowHtml = '';
                                switch (orderType) {
                                    case 'paid':
                                        rowHtml = `
                                                <tr>
                                                    <td>${order.traceNo}</td>
                                                    <td>${order.name}</td>
                                                    <td>${order.createTime}</td>
                                                    <td>${order.totalPrice}</td>
                                                </tr>
                                            `;
                                        break;
                                    case 'unpaid':
                                        rowHtml = `
                                                <tr>
                                                    <td>${order.traceNo}</td>
                                                    <td>${order.name}</td>
                                                    <td>${order.createTime}</td>
                                                    <td>￥${order.totalPrice}</td>
                                                    <td><button class="pay-button" onclick="window.open('http://localhost:9000/alipay/pay?traceNo=${order.traceNo}&totalAmount=${order.totalPrice}&subject=购买商品', '_blank')">去支付</button></td>
                                                </tr>
                                            `;
                                        break;
                                    case 'uncommented':
                                        console.log(order);
                                        rowHtml = `
                                                <tr>
                                                    <td>${order.traceNo}</td>
                                                    <td>${order.name}</td>
                                                    <td>${order.totalPrice}</td>
                                                    <td><button class="comment-button" onclick="location.href='comment.html?uid=${order.uid}&pid=${order.pid}&traceNo=${order.traceNo}'">去评价</button></td>
                                                </tr>
                                            `;
                                        break;
                                    case 'commented':
                                        rowHtml = `
                                                <tr>
                                                    <td>${order.traceNo}</td>
                                                    <td>${order.name}</td>
                                                    <td>${order.totalPrice}</td>
                                                    <td>${order.createTime}</td>
                                                    <td><button class="view-comment-button" onclick="location.href='product-detail.html?id=${order.pid}'">查看评价</button></td>
                                                </tr>
                                            `;
                                        break;
                                    case 'all':
                                        rowHtml = `
                                                <tr>
                                                    <td>${order.traceNo}</td>
                                                    <td>${order.name}</td>
                                                    <td>${order.createTime}</td>
                                                    <td>￥${order.totalPrice}</td>
                                                    <td>${order.status}</td>
                                                </tr>
                                            `;
                                        break;
                                }
                                $(orderListId).append(rowHtml);
                            });
                        } else {
                            $(orderListId).append('<tr><td colspan="4">没有订单记录</td></tr>');
                        }
                    } else {
                        const orderListId = `#order-list-${orderType}`;
                        // 检查是否已经添加过加载失败提示，如果没有则添加
                        if ($(orderListId).find('tr').length === 0 ||!$(orderListId).find('tr:contains("加载失败")').length) {
                            $(orderListId).append('<tr><td colspan="4">加载失败，请稍后再试。</td></tr>');
                        }
                    }
                },
                error: function () {
                    const orderListId = `#order-list-${orderType}`;
                    // 检查是否已经添加过加载失败提示，如果没有则添加
                    if ($(orderListId).find('tr').length === 0 ||!$(orderListId).find('tr:contains("加载失败")').length) {
                        $(orderListId).append('<tr><td colspan="4">加载失败，请稍后再试。</td></tr>');
                    }
                }
            });
        }

        // 初次加载时显示相应部分
        showSection();

        // 点击链接时更新内容并防止默认行为，同时触发页面重新渲染
        $('nav.dropdown a').on('click', function (event) {
            const href = $(this).attr('href');
            event.preventDefault(); // 阻止默认链接行为
            window.location.hash = $(this).attr('href').substring($(this).attr('href').indexOf('#')); // 更新哈希
            showSection(); // 显示对应的部分
            $(window).trigger('hashchange'); // 手动触发hashchange事件，确保页面重新渲染
        });

        // 监听hashchange事件，当哈希值变化时重新渲染页面相关部分
        $(window).on('hashchange', function () {
            showSection();
        });
    });

    function logout() {
        if (confirm("确认要退出登录？")) {
            $.ajax({
                url: "/user/logout",
                type: "GET",
                success: function (response) {
                    if (response.state === 200) {
                        alert("退出成功");
                        location.href = "home.html";
                    } else {
                        alert("当前未登录，点击确认回到首页");
                        location.href = "home.html";
                    }
                },
                error: function () {
                    alert("抱歉，当前状态异常，请点击确认！");
                    location.assign('/home.html');
                }
            });
        }
    }

    // 检查用户是否登录
    function checkLogin() {
        $.ajax({
            url: "/user/get-user",
            type: "get",
            success: function (result) {
                if (result.state == 401) {
                    alert("登陆已失效，请重新登陆");
                    location.href = "home.html";
                }
            },
            error: function (err) {
                if (err.status == 401) {
                    alert("当前用户未登录，你即将回到首页");
                    location.href = "home.html";
                }
            }
        })
    }
    checkLogin();
</script>

</body>

</html>